<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb />
    </div>
    <div class="page-main">

      <el-card shadow="hover" class="layout-padding-auto">
        <div class="system-user-search mb15 flex align-center">
          <el-input clearable v-model="state.tableData.param.name" size="default" placeholder="患者名称"
            style="max-width: 180px"></el-input>
          <el-select clearable size="default" placeholder="请选择随访状态" v-model="state.tableData.param.status"
            style="margin-left:15px;">
            <el-option label="执行中" value="1"></el-option>
            <el-option label="执行结束" value="2"></el-option>
          </el-select>
          <div>
            <el-date-picker size="default" v-model="state.timeRange" type="daterange" range-separator="至"
              start-placeholder="起始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
              style="margin-left:15px;width: 260px;" />
          </div>

          <el-button size="default" type="primary" @click="getTableData" class="ml10">
            <el-icon>
              <ele-Search />
            </el-icon>
            查询
          </el-button>
          <el-button size="default" type="" class="ml10">
            <el-icon>
              <ele-Refresh />
            </el-icon>
            重置
          </el-button>
        </div>
        <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="name" label="姓名" show-overflow-tooltip>
            <template #default="scope">
              <div>
                <el-tag v-if="scope.row.is_patient_sign" size="mini" style="margin-right: 5px;" >标</el-tag>
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="operation_name" label="手术名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="anesthesiaMode" label="麻醉" show-overflow-tooltip></el-table-column>
          <el-table-column prop="operate_time" label="手术时间" show-overflow-tooltip>
            <template #default="scope">
              <div>{{ scope.row.operate_time }}
                <br />
                <span v-if="scope.row.leave_day > 0">(已出院{{ scope.row.leave_day }}天)</span>
              </div>


            </template>
          </el-table-column>
          <el-table-column prop="conversation_count" label="人工随访" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ai_count" label="智能随访" show-overflow-tooltip>
            <template #default="scope">
              <div>{{ scope.row.rule_str }}</div>
              <div>
                <span v-for="(item) in scope.row.call_status"
                  :style="{ backgroundColor: item, width: '15px', height: '5px', marginRight: '5px', display: 'inline-block' }"></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="template" label="随访模版" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tmp_status" label="随访状态" show-overflow-tooltip>
            <template #default="scope">
              <div v-if="scope.row.tmp_status == 1">正常</div>
              <div v-else style="color: red">需关注</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button size="small" text type="primary" @click="goDetail(scope.$index)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
          :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum" background
          v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="state.tableData.total">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script setup name="systemDic">
import { ElMessageBox, ElMessage } from 'element-plus';
import { RecordLogApi } from "/@/api/record/log";
import { daysBetween, formatTimestamp } from "/@/utils/timeUtil";
import { useRouter } from 'vue-router';
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const router = useRouter();

// 定义变量内容
const state = reactive({
  tableData: {
    data: [],
    total: 0,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
      name: "",
      status: "",
    },
  },
  timeRange: []
});

// 初始化表格数据
const getTableData = () => {
  state.tableData.loading = true;
  const param = {
    page_index: state.tableData.param.pageNum,
    page_size: state.tableData.param.pageSize,
    start_time: state.timeRange && state.timeRange.length ? state.timeRange[0] : '',
    end_time: state.timeRange && state.timeRange.length ? state.timeRange[1] : '',
    name: state.tableData.param.name,
    status: state.tableData.param.status,
  }
  RecordLogApi().getTableData(param).then(res => {
    state.tableData.total = res.data.total
    state.tableData.data = res.data.data
    state.tableData.loading = false;

    state.tableData.data.forEach((item, index) => {
      var ruleArr = item.rules.split(",")
      item.tmp_status = 1;
      item.leave_day = daysBetween(item.leave_time)
      item.call_status.forEach((i) => {
        if (i != "green") {
          item.tmp_status = 2;
        }
      })
      item.rule_str = ruleArr.length + "/3";
      item.operate_time = formatTimestamp(item.operate_time * 1000)
    });
    console.log(state.tableData.data)
  })
};

const goDetail = (index) => {
  var data = state.tableData.data[index];
  var query = {
    id: data.patient_id,
    pcw_id: data.pcw_id,
    name: data.name,
    phone: data.phone,
    operation_name: data.operation_name,
    anesthesiaMode: data.anesthesiaMode,
    operate_time: data.operate_time,
    leave_day: data.leave_day,
  }
  router.push({
    path: '/intelligentOutbound/record/recordDetail',
    query: query,
  });
}


// 分页改变
const onHandleSizeChange = (val) => {
  state.tableData.param.pageSize = val;
  getTableData();
};
// 分页改变
const onHandleCurrentChange = (val) => {
  state.tableData.param.pageNum = val;
  getTableData();
};
// 页面加载时
onMounted(() => {
  getTableData();
});
</script>
